<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no" />
		<title>刮刮卡</title>
	</head>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		html,body{height: 100%;overflow: hidden;}
		#wrap,ul,ul>li{height: 100%;}
		ul>li{background: url(img/刮刮卡2.jpg)no-repeat;background-size: 100% 100%;}
		canvas{position: absolute;top: 0;left: 0;transition: 1s;}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var canvas=document.querySelector("canvas");
			canvas.width=document.documentElement.clientWidth;
			canvas.height=document.documentElement.clientHeight;
			if(canvas.getContext){
				var ctx=canvas.getContext("2d");
				var img=new Image();
				img.src="img/刮刮卡1.jpg"
				img.onload=function(){
					draw();
				}
				function draw(){
					ctx.drawImage(img,0,0,canvas.width,canvas.height);
					canvas.addEventListener("touchstart",function(ev){
						ev=ev||event;
						var touchC=ev.changedTouches[0];
						var x=touchC.clientX-canvas.offsetLeft;
						var y=touchC.clientY-canvas.offsetTop;
						ctx.lineWidth=40;
						ctx.lineCap="round";
						ctx.lineJoin="round";
						ctx.globalCompositeOperation="destination-out";
						ctx.save();
						ctx.beginPath();
						ctx.moveTo(x,y);
						ctx.lineTo(x+1,y+1);
						ctx.stroke();
						ctx.restore();
					})

					canvas.addEventListener("touchmove",function(ev){
						ev=ev||event;
						var touchC=ev.changedTouches[0];
						var x=touchC.clientX-canvas.offsetLeft;
						var y=touchC.clientY-canvas.offsetTop;
						ctx.save();
						ctx.lineTo(x,y);
						ctx.stroke();
						ctx.restore();
					})
					canvas.addEventListener("touchend",function(){
						var flag=0;
						var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
						var allPx=imgData.width*imgData.height;
						for (var i=0;i<allPx;i++) {
							if(imgData.data[4*i+3]===0){
								flag++;
							}
						}
						if(flag>=allPx/2){
							canvas.style.opacity=0;
						}

					})
					canvas.addEventListener("transitionend",function(){
						this.remove();
					})
				}
			}
		}
	</script>
	<body>
		<div id="wrap">
			<canvas></canvas>
			<ul>
				<li></li>
			</ul>
		</div>
	</body>
</html>
